<template>
    <div class="goodlist" @click="doClick(index)" :class="{ 'gl-active': show }">
        <!-- 顶部 -->
        <div class="gl-top">
            <div class="gl-logo">
                <img src="@/assets/logo.png" alt="">
            </div>
            <div class="gl-desc">SECURED LOAN</div>
        </div>
        <!-- 时间 -->
        <div class="gl-time">
            <div class="gl-time-left">
                <div class="gl-time-title">Loan amount(₹)</div>
                <div class="gl-time-data">₹ {{ item.amount }}</div>
            </div>
            <div class="gl-time-right">
                <div class="gl-time-right">
                    <div class="gl-time-title">Term(Days)</div>
                    <div class="gl-time-data">{{ item.term }}</div>
                </div>
            </div>
        </div>
        <!-- 内容 -->
        <div class="gl-content">
            <div class="gl-content-left">
                <ul class="gl-content-father">
                    <li>Interest</li>
                    <li>Total service charge</li>
                    <li>Amount Received</li>
                    <li>Repayment amount</li>
                </ul>
            </div>
            <div class="gl-content-right">
                <ul class="gl-content-father">
                    <li>₹ {{ Math.round(item.amount * item.term * item.dayRate) }}</li>
                    <li>₹ {{ item.serviceAmount }}</li>
                    <li>₹ {{ item.amount - item.serviceAmount - Math.round(item.amount * item.term * item.dayRate) }}</li>
                    <li>₹ {{ item.amount }}</li>
                </ul>
            </div>
        </div>

    </div>
</template>
<script>
export default {
    name: 'GoodList',
    props: ['item', 'index', 'goodsdata'],
    data() {
        return {
            show: false,

        }
    },
    methods: {
        //点击事件
        doClick(index) {
            this.show = !this.show
            if (this.show) {
                const data = {
                    id: this.item.id,
                    show: this.show,
                    index: this.index
                }
                this.$emit('changeBtn', data)
            } else {
                const data = {
                    id: this.item.id,
                    show: this.show,
                    index: this.index
                }
                this.$emit('changeBtn', data)
            }
        },
    }
}
</script>

<style scoped lang="less">
@a: 3.75vw;

.gl-active {
    background: #FFFFFF;
    border: (2/@a) solid #7E42FF !important;
    border-radius: (15/@a) !important;
}

.goodlist {
    width: (310/@a);
    height: (208/@a);
    background-color: #fff;
    margin-top: (13/@a);
    margin-left: (30/@a);
    border-radius: (15/@a);
    border: (2/@a) solid transparent;

    .gl-top {
        display: flex;
        padding-top: (12/@a);
        padding-left: (9/@a);

        .gl-logo {

            width: (20/@a);

            img {
                width: 100%;
            }
        }

        .gl-desc {
            font-family: 'Inter';
            font-style: normal;
            font-weight: 500;
            font-size: (16/@a);
            color: #202020;
            margin-left: (8/@a);
        }
    }

    .gl-time {
        text-align: center;
        justify-content: space-around;
        display: flex;
        position: relative;
        left: (-10/@a);
        top: 0;
        width: (330/@a);
        height: (60/@a);
        background: linear-gradient(90deg, #7D42FF 0%, #BF36FE 100%);
        border-radius: (10/@a);
        padding-top: (10/@a);
        box-sizing: border-box;

        .gl-time-title {
            font-family: 'Inter';
            font-style: normal;
            font-weight: 400;
            font-size: (12/@a);
            text-align: center;
            color: #FFFFFF;
        }

        .gl-time-data {
            font-family: 'Inter';
            font-style: normal;
            font-weight: 700;
            font-size: (20/@a);
            line-height: 200%;
            text-align: center;
            color: #FFFFFF;
        }
    }



    .gl-content {
        display: flex;
        justify-content: space-between;

        .gl-content-left {
            width: 50%;
            height: 30px;
            font-family: 'Inter';
            font-style: normal;
            font-weight: 400;
            font-size: (12/@a);
            text-align: left;
            color: #808080;
            margin-left: (38/@a);

        }

        .gl-content-right {
            width: 30%;
            height: 30px;
            font-family: 'Inter';
            font-style: normal;
            font-weight: 400;
            font-size: (12/@a);
            text-align: right;
            color: #202020;
            margin-right: (50/@a);
        }

        .gl-content-father {
            display: flex;
            flex-direction: column;
            justify-content: center;

            li {
                margin-top: (10/@a);
            }
        }
    }

}
</style>